<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="counter">
    <button class="sub-1">sub</button>
    <input type="text" class="counter-1">
    <button class="add-1">add</button>
  </div>

  <div class="counter">
    <button class="sub-2">sub</button>
    <input type="text" class="counter-2">
    <button class="add-2">add</button>
  </div>

  <div class="counter">
    <button class="sub-3">sub</button>
    <input type="text" class="counter-3">
    <button class="add-3">add</button>
  </div>
</body>
</html>

<script>

const { log } = console;


// 沙箱模式
function initCount(init = 0) {
  let count = init; // 此时的 count 变量，无法被外界直接获取；从而形成 私有变量

  return {
    get() {
      return count;
    },
    set(val) {
      count = val;
    }
  }
}


{ // 第一套 counter；初始值为 10

  const fCount = initCount(10); // 通过 闭包，oCount 的 set 和 get 函数，拿到了 外部函数的 count 变量
  
  const addBtn = document.querySelector('.add-1');
  const subBtn = document.querySelector('.sub-1');
  const ipt = document.querySelector('.counter-1');
  
  ipt.value = fCount.get();
  
  addBtn.addEventListener('click', () => {
    fCount.set(fCount.get() + 1);
    ipt.value = fCount.get();
  });
  
  subBtn.addEventListener('click', () => {
    fCount.set(fCount.get() - 1);
    ipt.value = fCount.get();
  });

}


{ // 第二套 counter；初始值为 100

  const fCount = initCount(100); // 通过 闭包，oCount 的 set 和 get 函数，拿到了 外部函数的 count 变量

  const addBtn = document.querySelector('.add-2');
  const subBtn = document.querySelector('.sub-2');
  const ipt = document.querySelector('.counter-2');

  ipt.value = fCount.get();

  addBtn.addEventListener('click', () => {
    fCount.set(fCount.get() + 1);
    ipt.value = fCount.get();
  });

  subBtn.addEventListener('click', () => {
    fCount.set(fCount.get() - 1);
    ipt.value = fCount.get();
  });

}



{ // 第三套 counter；初始值为 1000

const fCount = initCount(1000); // 通过 闭包，oCount 的 set 和 get 函数，拿到了 外部函数的 count 变量

const addBtn = document.querySelector('.add-3');
const subBtn = document.querySelector('.sub-3');
const ipt = document.querySelector('.counter-3');

ipt.value = fCount.get();

addBtn.addEventListener('click', () => {
  fCount.set(fCount.get() + 1);
  ipt.value = fCount.get();
});

subBtn.addEventListener('click', () => {
  fCount.set(fCount.get() - 1);
  ipt.value = fCount.get();
});

}

// 注：沙箱模式，还有一个好处：可以做到「数据隔离」
  // 即 1 - 2 - 3 ，三套 DOM， 不是用的一个 count 全局变量
    // 好处：可以 各自 操作各自的数据
</script>
